<template>
    <div class="body">
        <div class="content">
            <mt-cell title="请给配送员打分"></mt-cell>
            <div class="btn-group">
                <mt-button class="btn1 iconfont icon-huiyuanmanyidu" :class="riderGrade==10?'selected':''" @click="riderEva(10)">非常满意</mt-button>
                <mt-button class="btn1 iconfont icon-manyidu1"  :class="riderGrade==8?'selected':''" @click="riderEva(8)">满意</mt-button>
                <mt-button class="btn1 iconfont icon-manyiduyiban"  :class="riderGrade==5?'selected':''" @click="riderEva(5)">一般</mt-button>
                <mt-button class="btn1 iconfont icon-manyidu"  :class="riderGrade==3?'selected':''" @click="riderEva(3)">不满意</mt-button>
                <mt-button class="btn1 iconfont icon-pj_bumanyi"  :class="riderGrade==1?'selected':''" @click="riderEva(1)">非常不满意</mt-button>
            </div>
            <div>
                <mt-field placeholder="请填写对配送员的评价" type="textarea" rows="4" v-model="riderInput"></mt-field>
            </div>
        </div>
        <div class="content">
            <mt-cell title="对商家/菜品打分"></mt-cell>
            <div class="btn-group">
                <mt-button class="btn1 iconfont icon-huiyuanmanyidu" :class="orderGrade==10?'selected':''" @click="orderEva(10)">非常满意</mt-button>
                <mt-button class="btn1 iconfont icon-manyidu1"  :class="orderGrade==8?'selected':''" @click="orderEva(8)">满意</mt-button>
                <mt-button class="btn1 iconfont icon-manyiduyiban"  :class="orderGrade==5?'selected':''" @click="orderEva(5)">一般</mt-button>
                <mt-button class="btn1 iconfont icon-manyidu"  :class="orderGrade==3?'selected':''" @click="orderEva(3)">不满意</mt-button>
                <mt-button class="btn1 iconfont icon-pj_bumanyi"  :class="orderGrade==1?'selected':''" @click="orderEva(1)">非常不满意</mt-button>
            </div>
            <div>
                <mt-field placeholder="请填写对该商家/菜品的评价" type="textarea" rows="4" v-model="orderInput"></mt-field>
            </div>
        </div>
        <section class="login_message">
            <mt-button class="btn" @click="Comment">提交</mt-button>
        </section>
    </div>
</template>
<script>
import {comment} from '../api'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            riderGrade:"",
            orderGrade:"",
            riderInput:"",
            orderInput:""
        }
    },
    methods:{
        riderEva(grade){
            this.riderGrade = grade
        },
        orderEva(grade){
            this.orderGrade = grade
        },
        Comment(){
            const data = {
                token:this.$store.getters.token,
                order_no:this.$route.query.order,
                store_comment:this.orderInput,
                send_comment:this.riderInput,
                store_score:this.orderGrade?this.orderGrade:"10",
                send_score:this.riderGrade?this.riderGrade:"10"
            }
            comment(data).then(res=>{
                Toast(res.msg);
                this.$router.go(-1)
            })
        }
    }
}
</script>
<style scoped>
    .body{
        background: #eee;
        height: Calc(100vh - 5rem);
        padding:1rem 0;
    }
    .content{
        width: 80%;
        margin: auto;
        background: #fff;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .btn-group{
        display: flex;
        flex-wrap: wrap;
        height: 6rem;
    }
    .btn1{
        width: 6rem;
        height: 2rem;
        font-size: 0.6rem;
        border: 1px solid #02a774;
        background: #fff;
        color: #666;
        margin: auto;
    }
    .selected {
        background: #02a774;
        color: #fff
    }
</style>